<template>
  <div class="home-container">
    <div class="headerImgs">
      <img :src="bannerImg" alt="" srcset="" />
      <div class="swipeContent" v-if="noticeList.length">
        <swipeText :type="0" :list="noticeList" />
      </div>
      <div
        class="pageBtnRule font-24 color_fff f_c_c_c"
        @click="goPage('rule')"
      >
       <img :src="rule_tag_img" alt="">
      </div>
      <div
        class="pageBtn2 pageBtn font-24 color_fff f_c_c_c"
        @click="goPage('record')"
      >
        砍价记录
      </div>
      <div
        class="pageBtn3 pageBtn font-24 color_fff f_c_c_c"
        @click="goPage('myGoods')"
      >
        我的奖品
      </div>
    </div>

    <div class="content f_c_c_c">
      <img :src="titleImg" alt="" srcset="" />
    </div>
    <div class="goods_content f_c_c_c">
      <div class="goods f_c_c_c ">
        <goodsList
          v-for="item in List"
          :item="item"
          class="mb-20"
          @click="goDetail"
        ></goodsList>
      </div>
    </div>
    <div v-if="popupShow">
      <popupMore
        ref="refPopupShow"
        v-model="popupShow"
        :type="popupType"
        @sub="getNewInfoData"
      ></popupMore>
    </div>
  </div>
</template>

<script>
import rule_tag_img from "@/assets/rule_tag.png";
import titleImg from "@/assets/title.png";
import bannerImg from "@/assets/banner.png";
import goodsList from "@/components/goodsList";

import swipeText from "@/components/swipeText";

import { getUrlQuery } from "@/utils";
import { getToken, setToken } from "@/utils/auth";
import { freeTake, initBargain, classGood } from "@/api/goods";

export default {
  name: "Home",
  components: { goodsList, swipeText },
  data() {
    return {
      rule_tag_img,
      titleImg,
      bannerImg,
      List: [],
      noticeList: [],
      popupShow: false,
      popupType: 0,
    };
  },
  computed: {
    code() {
      return this.$store.getters.code;
    },
  },
  created() {},
  mounted() {
    this.handleLogin();
  },
  methods: {
    goPage(e) {
      this.$router.push({
          path: `/${e}`,
        });
    },
    goDetail(item) {
      let { g_id = "", g_o_id = "", type, good_type, good_class_id } = item;

      let goUrlShow;
      if (this.bargain_user_state != 1) {
        if ((good_class_id == 5 && good_type == 1) || type == 2){
          goUrlShow = true;
        } else {
          goUrlShow = false;
        }
      } else {
        goUrlShow = true;
      }
      if (!goUrlShow) {
        this.$toast("砍价次数已达上限，邀请好友参与可领更多机会");
        return;
      }
      this.$router.push({
        path: "/detailRed",
        query: { g_id: g_id, g_o_id: g_o_id },
      });
    },
    handleLogin() {
      console.log("aaaaa", window.location.href);
      let params = getUrlQuery();
      console.log("params", params);
      // if (params.token) {
      //   this.handleLogin(params);
      // }
      params = {
        token: "YreNVbwTv8icg3Uy9jXmLpu0FPf6uuZ0",
        userId: 60,
        mobilePhone: 18583342684,
      };
      this.$store.commit(`user/SET_CODE`, params.token);

      this.loading = true;
      let { mobilePhone: mobile_phone, userId: user_id, token: code } = params;
      this.$store
        .dispatch("user/login", { code, user_id, mobile_phone })
        .then(() => {
          this.loading = false;
          this.getGoods();
        })
        .catch(() => {
          this.loading = false;
        });
    },
    async getGoods() {
      let intRes = await initBargain();
      let {
        bargain_status = 0,
        bargain_user_red = 0,
        bargain_user_state = 0,
      } = intRes.data;

      this.bargain_user_state = bargain_user_state;

      if (bargain_user_red > 0) {
        this.popupShow = true;
        this.popupType = 6;
      }

      if (bargain_status == 0) {
        return;
      }
      freeTake({ loading: true }).then((res) => {
        let { goods, notice } = res.data;
        this.List = goods;
        this.noticeList = notice;
      });
    },
    //获取新人福利商品
    async getNewInfoData(e) {
      let res = await classGood({
        type: 5,
      });
      let { g_id = null, g_o_id = "0" } = res.data;
      this.$router.push({
        path: "/detailRed",
        query: { g_id: g_id, g_o_id: g_o_id },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.home-container {
  position: relative;
  background-color: #fbedd3;
  .headerImgs {
    width: 100%;
    height: 832px;
    position: relative;
    .swipeContent {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    > img {
      width: 100%;
      height: 832px;
    }
    .pageBtn {
      width: 30px;
      height: 160px;
      background: rgba(10, 10, 10, 0.7);
      padding: 0 10px;
    }
    .pageBtnRule {
      position: absolute;
      top: 150px;
      right: 0;
      border-radius: 0px 20px 20px 0px;
      >img{
        width: 54px;
        height: 67px;
      }
    }
    .pageBtn2 {
      position: absolute;
      top: 300px;
      right: 0;
      border-radius: 20px 0px 0px 20px;
    }
    .pageBtn3 {
      position: absolute;
      top: 500px;
      right: 0;
      border-radius: 20px 0px 0px 20px;
    }
  }

  > .content {
    width: 100%;
    position: absolute;
    top: 700px;
    left: 0;
    > img:nth-child(1) {
      width: 688px;
      height: 517px;
    }
  }
  > .goods_content {
    position: absolute;
    width: 100%;
    height: calc(100vh - 832px);
    top: 800px;
    overflow: auto;

    > .goods {
      width: 648px;
      position: absolute;

      top: 0;
    }
  }
}
</style>
